<template>
  <div class="app-container" :class="{'hide-bar': !tabBar}">
    <div class="layout-view">
      <!-- <navigation>
        <router-view></router-view>
      </navigation> -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <div class="layout-footer" ref="naxBox">
      <TabBar @change="handleChange" :defaultPath="defaultPath" />
    </div>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
export default {
  name: 'AppLayout',
  data() {
    return {
      tabBar: true,
      defaultPath: ""
    }
  },
  watch: {
    $route(to) {
      this.showTabBar(to)
    },
  },
  components: {
    TabBar
  },  
  created(){
      // 登录过，进入主页
      if (localStorage.getItem('user')) {
        store.dispatch('setUser', JSON.parse(localStorage.getItem('user')));
      }
  },
  mounted(){
  },
  created(){
    this.defaultPath = this.$route.path;
    this.showTabBar(this.$route)
  },
  methods: {
    showTabBar(roter){
      if(roter.meta && roter.meta.tabBar === false){
        this.tabBar = false;
      }else{
        this.tabBar = true;
      }
    },
    handleChange(v) {
      console.log('tab value:', v)
    }
  }
}
</script>
<style lang="scss" scoped>
  $bottomSize: 50px;

  .app-container{
    display: flex;
    flex-flow: column;
    height: 100%;
    padding-bottom: $bottomSize;
    transition: all 0.25s ease 0s;
    overflow: hidden;
    .van-tabbar{
      transition: all 0.25s ease 0s;
    }
  
    .layout-view{
      display: flex;
      flex-flow: column;
      height: 100%;
      background-color: #f2f1f8;
    }

    &.hide-bar{
      padding-bottom: 0;
      .van-tabbar{
        bottom: -$bottomSize;
      }
    }
  }
</style>
